<template>
  <div
    class="wel animate__animated"
    :class="{ animate__zoomInUp: animationIn, animate__zoomOut: animationOut }"
  >
    <img
      alt="logo"
      class="logo"
      :class="{ shake: noActivated }"
      @click="noActivated = true"
      src="@/assets/logo.png"
    />
    <h1>E World Game</h1>
  </div>
</template>

<script lang="ts">
import router from "@/router";
import { defineComponent, onMounted, ref } from "vue";
export default defineComponent({
  name: "Wel",
  setup() {
    // Datas
    const noActivated = ref(false);
    const animationIn = ref(false);
    const animationOut = ref(false);
    // hooks
    onMounted(() => {
      animationOut.value = false;
      animationIn.value = true;
      setTimeout(() => {
        animationIn.value = false;
        animationOut.value = true;
      }, 4000);
      setTimeout(() => {
        // 直接登陆, 如果无账户则进入登陆注册页面
        router.push({
          path: "/home"
        });
      }, 5000);
    });
    return {
      noActivated,
      animationIn,
      animationOut
    };
  }
});
</script>
<style lang="scss" scoped>
.wel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  .logo {
    cursor: pointer;
    height: fit-content;
  }
}
.shake {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}
</style>
